<!DOCTYPE html>

<html>
<head>
  <title>remote.js</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page"><a class="source" href="../index.html"><<< back to documentation</a>
            
              
              <a class="source" href="abstract.html">
                abstract.js
              </a>
            
              
              <a class="source" href="defaults.html">
                defaults.js
              </a>
            
              
              <a class="source" href="factory.html">
                factory.js
              </a>
            
              
              <a class="source" href="field.html">
                field.js
              </a>
            
              
              <a class="source" href="form.html">
                form.js
              </a>
            
              
              <a class="source" href="main.html">
                main.js
              </a>
            
              
              <a class="source" href="multiple.html">
                multiple.js
              </a>
            
              
              <a class="source" href="pubsub.html">
                pubsub.js
              </a>
            
              
              <a class="source" href="remote.html">
                remote.js
              </a>
            
              
              <a class="source" href="ui.html">
                ui.js
              </a>
            
              
              <a class="source" href="utils.html">
                utils.js
              </a>
            
              
              <a class="source" href="validator.html">
                validator.js
              </a>
            
              
              <a class="source" href="validator_registry.html">
                validator_registry.js
              </a>
            
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>remote.js</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> $ <span class="hljs-keyword">from</span> <span class="hljs-string">'jquery'</span>;

<span class="hljs-keyword">import</span> Parsley <span class="hljs-keyword">from</span> <span class="hljs-string">'./main'</span>;

$.extend(<span class="hljs-literal">true</span>, Parsley, {
  asyncValidators: {
    <span class="hljs-string">'default'</span>: {
      fn: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">xhr</span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>By default, only status 2xx are deemed successful.
Note: we use status instead of state() because responses with status 200
but invalid messages (e.g. an empty body for content type set to JSON) will
result in state() === ‘rejected’.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">return</span> xhr.status &gt;= <span class="hljs-number">200</span> &amp;&amp; xhr.status &lt; <span class="hljs-number">300</span>;
      },
      url: <span class="hljs-literal">false</span>
    },
    reverse: {
      fn: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">xhr</span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>If reverse option is set, a failing ajax request is considered successful</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">return</span> xhr.status &lt; <span class="hljs-number">200</span> || xhr.status &gt;= <span class="hljs-number">300</span>;
      },
      url: <span class="hljs-literal">false</span>
    }
  },

  addAsyncValidator: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name, fn, url, options</span>) </span>{
    Parsley.asyncValidators[name] = {
      fn: fn,
      url: url || <span class="hljs-literal">false</span>,
      options: options || {}
    };

    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
  }

});

Parsley.addValidator(<span class="hljs-string">'remote'</span>, {
  requirementType: {
    <span class="hljs-string">''</span>: <span class="hljs-string">'string'</span>,
    <span class="hljs-string">'validator'</span>: <span class="hljs-string">'string'</span>,
    <span class="hljs-string">'reverse'</span>: <span class="hljs-string">'boolean'</span>,
    <span class="hljs-string">'options'</span>: <span class="hljs-string">'object'</span>
  },

  validateString: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value, url, options, instance</span>) </span>{
    <span class="hljs-keyword">var</span> data = {};
    <span class="hljs-keyword">var</span> ajaxOptions;
    <span class="hljs-keyword">var</span> csr;
    <span class="hljs-keyword">var</span> validator = options.validator || (<span class="hljs-literal">true</span> === options.reverse ? <span class="hljs-string">'reverse'</span> : <span class="hljs-string">'default'</span>);

    <span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> === <span class="hljs-keyword">typeof</span> Parsley.asyncValidators[validator])
      <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'Calling an undefined async validator: `'</span> + validator + <span class="hljs-string">'`'</span>);

    url = Parsley.asyncValidators[validator].url || url;</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>Fill current value</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">if</span> (url.indexOf(<span class="hljs-string">'{value}'</span>) &gt; <span class="hljs-number">-1</span>) {
      url = url.replace(<span class="hljs-string">'{value}'</span>, <span class="hljs-built_in">encodeURIComponent</span>(value));
    } <span class="hljs-keyword">else</span> {
      data[instance.$element.attr(<span class="hljs-string">'name'</span>) || instance.$element.attr(<span class="hljs-string">'id'</span>)] = value;
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Merge options passed in from the function with the ones in the attribute</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">var</span> remoteOptions = $.extend(<span class="hljs-literal">true</span>, options.options || {} , Parsley.asyncValidators[validator].options);</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>All <code>$.ajax(options)</code> could be overridden or extended directly from DOM in <code>data-parsley-remote-options</code></p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    ajaxOptions = $.extend(<span class="hljs-literal">true</span>, {}, {
      url: url,
      data: data,
      type: <span class="hljs-string">'GET'</span>
    }, remoteOptions);</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>Generate store key based on ajax options</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    instance.trigger(<span class="hljs-string">'field:ajaxoptions'</span>, instance, ajaxOptions);

    csr = $.param(ajaxOptions);</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>Initialise querry cache</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> === <span class="hljs-keyword">typeof</span> Parsley._remoteCache)
      Parsley._remoteCache = {};</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>Try to retrieve stored xhr</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">var</span> xhr = Parsley._remoteCache[csr] = Parsley._remoteCache[csr] || $.ajax(ajaxOptions);

    <span class="hljs-keyword">var</span> handleXhr = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">var</span> result = Parsley.asyncValidators[validator].fn.call(instance, xhr, url, options);
      <span class="hljs-keyword">if</span> (!result) <span class="hljs-comment">// Map falsy results to rejected promise</span>
        result = $.Deferred().reject();
      <span class="hljs-keyword">return</span> $.when(result);
    };

    <span class="hljs-keyword">return</span> xhr.then(handleXhr, handleXhr);
  },

  priority: <span class="hljs-number">-1</span>
});

Parsley.on(<span class="hljs-string">'form:submit'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  Parsley._remoteCache = {};
});

<span class="hljs-built_in">window</span>.ParsleyExtend.addAsyncValidator = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  ParsleyUtils.warnOnce(<span class="hljs-string">'Accessing the method `addAsyncValidator` through an instance is deprecated. Simply call `Parsley.addAsyncValidator(...)`'</span>);
  <span class="hljs-keyword">return</span> Parsley.addAsyncValidator(...arguments);
};</pre></div></div>
            
        </li>
        
    </ul>
  </div>
<script type="text/javascript">var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-37229467-1"]);_gaq.push(["_trackPageview"]);(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script></body>
</html>
